<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门列表</title>
    <%include("/WEB-INF/views/common/basejs.html"){}%>
    <link rel="stylesheet" href="${ctxPath!}/css/admin.css" media="all">
    <!--行级别工具栏模板-->
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" onclick="addPage();" lay-event="add">新增</button>
            <button class="layui-btn layui-btn-sm" lay-event="delAll">删除</button>
        </div>
    </script>
    <script>
        var ptable=null,treeGrid=null,tableId='treeTable',layer=null,$,queryForm;
        var addPageIndex;//添加页面索引
        var editPageIndex;//编辑页面索引
        layui.config({
            base: '../js/extend/treeGrid/'
        }).extend({
            treeGrid:'treeGrid'
        }).use(['jquery','treeGrid','layer','form'],function(){
            var conditions=[];
            var obj={};
            obj.columnName='pid';
            obj.orderVal='asc';
            obj.operator='order';
            conditions.push(obj);
            $=layui.jquery;
            treeGrid = layui.treeGrid;//很重要
            layer=layui.layer;
            queryForm=layui.form;
            //渲染treeGrid
            ptable=treeGrid.render({
                id:tableId
                ,elem: '#'+tableId
                ,toolbar:'#toolbar'
                ,idField:'id'
                ,url:basePath+'/dept/getList?paging=true'
                ,where:{conditions:JSON.stringify(conditions),limit:100}
                ,isPage:true
                ,cellMinWidth: 100
                ,height:'100%'
                ,treeId:'id'//树形id字段名称
                ,treeUpId:'pid'//树形父id字段名称
                ,treeShowName:'deptName'//以树形式显示的字段
                ,iconOpen:false//是否显示图标【默认显示】
                ,cols: [[
                    {field:'deptName',width:'20%' , title:'部门名称'}
                    ,{field:'sort',width:'10%', title:'排序值'}
                    ,{field:'createTime',width:'15%', title:'创建时间'}
                    ,{field:'updateTime',width:'15%', title:'更新时间'}
                    ,{field:'status',width:'10%', title:'状态',
                        templet: function(obj){
                            if(obj.status==1){
                                return '<span class="layui-btn layui-btn-sm layui-btn-normal">有效</span>';
                            }else{
                                return '<span class="layui-btn layui-btn-sm layui-btn-danger">冻结</span>';
                            }
                        }
                    }
                    ,{width:'30%',title:'操作',align:'center'
                        ,templet: function(d){
                            var html='';
                            var addBtn='<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>';
                            var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                            return addBtn+delBtn;
                        }
                    }
                ]]
                ,page:false
                ,done:function(){
                }
            });
            //编辑和删除资源
            treeGrid.on('tool(toolbar)',function (obj){
                if(obj.event === 'del'){//删除行
                    del(obj);
                }else if(obj.event==="edit"){//添加行
                    editPage(obj.data.id);
                }
            });
            //新增
            treeGrid.on('toolbar(toolbar)',function (obj){
                if(obj.event === 'add'){//删除行
                    layer.msg("新增");
                }
            });
            //监听表单查询事件
            //查询表单点击查询事件
            queryForm.on('submit(queryForm)',function(data){
                var param=getCommonQueryData(data.field);
                ptable.reload({
                    where: param
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                return false;
            });
        });

        function del(obj) {
            layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
                function(index){//确定回调
                    $.ajax({
                        url:basePath+'/dept/delete',
                        type:'post',
                        data:{ids:obj.data.id},
                        dataType:'json',
                        success:function(data){
                            if(data.code==0){
                                obj.del();
                                layer.close(index);
                                layer.msg(data.msg);
                            }
                        },
                        error:function(){
                            layer.close(index);
                            layer.msg("删除节点失败,系统内部错误");
                        }
                    });
                    console.log(obj);

                },function (index) {//取消回调
                    layer.close(index);
                }
            );
        }
        //弹出新增资源页面
        function addPage(){
            addPageIndex=layer.open({
                title:'新增资源',
                type: 2,
                content:basePath+'/dept/addPage',
                area: ['600px', '400px'],
                maxmin:true,
                btn: ['新增', '取消']
                ,yes: function(index, layero){
                    var submit = layero.find('iframe').contents().find("#form-submit");
                    submit.click();
                }
            })
        }
        function editPage(id){
            editPageIndex=layer.open({
                title:'编辑资源',
                type: 2,
                content:basePath+'/dept/editPage?id='+id,
                area: ['600px', '400px'],
                maxmin:true,
                btn: ['编辑', '取消']
                ,yes: function(index, layero){
                    var submit = layero.find('iframe').contents().find("#form-submit");
                    submit.click();
                }
            })
        }
        //表格重新加载
        function query() {
            treeGrid.query(tableId);
        }
        //关闭添加页面
        function closeAddPage(){
            layer.close(addPageIndex);
        }
        //关闭编辑页面
        function closeEditPage(){
            layer.close(editPageIndex);
        }
        /*   var i=1000000;
           //添加
           function print(){
               console.log(treeGrid.cache[tableId]);
               var loadIndex=layer.msg("对象已打印，按F12，在控制台查看！", {
                   time:3000
                   ,offset: 'auto'//顶部
                   ,shade: 0
               });
           }
           function openorclose() {
               var map=treeGrid.getDataMap(tableId);
               var o= map['102'];
               treeGrid.treeNodeOpen(o,!o[treeGrid.config.cols.isOpen]);
           }

           function getCheckData() {
               var checkStatus = treeGrid.checkStatus(tableId)
                   ,data = checkStatus.data;
               layer.alert(JSON.stringify(data));
           }
           function getCheckLength(){
               var checkStatus = treeGrid.checkStatus(tableId)
                   ,data = checkStatus.data;
               layer.msg('选中了：'+ data.length + ' 个');
           }*/
    </script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <!--查询form区域-->
        <form id="queryForm" class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">部门名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="dept_name" placeholder="请输入" autocomplete="off" class="layui-input" operator="like">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit="" lay-filter="queryForm">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                </div>
            </div>
        </form>
        <!--内容区域-->
        <div class="layui-card-body">
            <table class="layui-hidden" id="treeTable" lay-filter="toolbar"></table>
        </div>
    </div>
</div>
</body>
</html>